<template>
  <div class="box">
    <div class="box_searh">
      <el-input
        style="width: 300px; margin: 0 15px;"
        v-model="queryParams.knowledgeName"
        @keyup.enter.native="MixinSearchList"
        placeholder="请输入知识库名称"
      >
        <el-button
          :loading="MixinLoading"
          @click="MixinSearchList"
          slot="append"
          icon="el-icon-search"
        ></el-button>
      </el-input>
    </div>
    <div
      v-loading="MixinLoading"
      class="box_tent"
    >
      <el-row :gutter="15">
        <el-col
          :xs="12"
          :sm="8"
          :lg="6"
        >
          <div
            class="tent_item"
            @click="addList"
          >
            <div class="item_title">
              <i class="el-icon-plus icon_add"></i>
              <div class="content">
                <div class="content_title">创建知识库</div>
              </div>
            </div>
            <div class="item_but">
              <div class="text">写入您自己的文本数据以增强 LLM 的上下文。</div>
            </div>
          </div>
        </el-col>
        <el-col
          v-for="item in dataList"
          :key="item.knowledgeId"
          :xs="12"
          :sm="8"
          :lg="6"
        >
          <div
            class="tent_item"
            @click="getLevel(item)"
          >
            <div class="item_title">
              <i class="el-icon-folder-opened icon"></i>
              <div class="content">
                <div class="content_title">{{ item.knowledgeName }}</div>
                <div class="content_text">{{ item.remark }}</div>
              </div>
            </div>
            <div @click.stop class="item_but">
              <div>序号：{{ item.sort }}</div>
              <el-dropdown @command="command($event, item)">
                <span class="el-dropdown-link">
                  <i class="el-icon-more"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="undate">修改</el-dropdown-item>
                  <el-dropdown-item command="delete"> <span style="color: red;">删除</span></el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>
        </el-col>
        <div v-if="!dataList.length">
          <div class="no_data">
            <el-empty description="暂无数据"></el-empty>
          </div>
        </div>
      </el-row>
    </div>
    <pagination
      v-show="total > 0"
      :total="total"
      style="margin-right: 10px;"
      :page.sync="queryParams.pageNum"
      :pageSizes="[6, 12, 20, 30, 50]"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <hu-drawer
      title="知识库"
      :open.sync="showModal"
      :setLook="MixinSetLook"
      :loading="MixinLoading"
      @submit="addFrom"
    >
      <!-- tent sta -->
      <el-form
        ref="queryForm"
        :model="formData"
        :rules="rulesSon"
        label-width="110px"
      >
        <el-form-item
          label="知识库名称"
          prop="knowledgeName"
        >
          <el-input
            v-model="formData.knowledgeName"
            placeholder="请输入知识库名称"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="排序"
          prop="remark"
        >
          <el-input-number
            v-model="formData.sort"
            controls-position="right"
            :min="0"
          ></el-input-number>
        </el-form-item>
        <el-form-item
          label="备注"
          prop="remark"
        >
          <el-input
            v-model="formData.remark"
            type="textarea"
            :autosize="{ minRows: 5, maxRows: 10}"
            placeholder="请输入备注"
          ></el-input>
        </el-form-item>
      </el-form>
      <!-- tent end -->
    </hu-drawer>
  </div>
</template>

<script>
import * as http from "@/api/repository/index";
export default {
  data() {
    return {
      formData: {
        sort: 1,
      },
      showModal: false,
      total: 0, // table total
      // list 参数
      queryParams: {
        pageNum: 1,
        pageSize: 12,
      },
      dataList: [],
      // 表单校验
      rulesSon: {
        knowledgeName: [
          { required: true, message: "知识库名称不能为空", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getLevel(item) {
      this.$router.push({
        path: `/index/details`,
        query: item,
      });
    },
    // 提交
    addFrom() {
      this.$refs["queryForm"].validate((valid) => {
        if (valid) {
          this.MixinLoading = true;
          let params = {
            ...this.formData,
          };
          if (this.formData.knowledgeId != undefined) {
            http
              .updateList(params)
              .then((response) => {
                this.$modal.msgSuccess("修改成功");
                this.showModal = false;
                this.getList();
              })
              .finally(() => {
                this.MixinLoading = false;
              });
          } else {
            http
              .addList(params)
              .then((response) => {
                this.$modal.msgSuccess("新增成功");
                this.showModal = false;
                this.MixinSearchList();
              })
              .finally(() => {
                this.MixinLoading = false;
              });
          }
        }
      });
    },
    // 表单重置
    reset() {
      this.MixinSetLook = "";
      this.formData = {
        knowledgeId: undefined,
        sort: 1,
      };
      this.resetForm("queryForm");
    },
    addList() {
      this.reset();
      this.MixinSetLook = 1;
      this.showModal = true;
    },
    command(type, row) {
      if (type === "undate") {
        this.reset();
        this.MixinSetLook = 2;
        this.formData = {
          ...row,
        };
        this.showModal = true;
      } else if (type === "delete") {
        // 删除
        this.deleteList(row);
      }
    },
    // 删除对话框
    deleteList(row) {
      this.$modal
        .confirm("是否确认删除数据项？")
        .then(() => {
          return http.deleteList(row.knowledgeId);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
    // 获取列表数据
    getList() {
      this.MixinLoading = true;
      let params = {
        ...this.queryParams,
      };
      http.getList(params).then(({ stateCode, result }) => {
        if (stateCode == 200) {
          this.MixinLoading = false;
          this.dataList = result.records;
          this.total = result.total;
        }
      });
    },
  },
};
</script>

<style lang='scss' scoped>
.box {
  .box_searh {
    display: flex;
    justify-content: flex-end;
  }
  .box_tent {
    padding: 15px;
    .tent_item {
      margin-bottom: 15px;
      border-radius: 5px;
      height: 120px;
      background-color: #fff;
      transition: 0.1s;
      &:hover {
        transform: scale(1.02);
      }
      cursor: pointer;
      padding: 20px;
      .item_title {
        display: flex;
        align-items: center;
        .icon {
          margin-right: 10px;
          background: rgba(68, 76, 231, 0.1);
          border: 1px solid rgba(68, 76, 231, 0.3);
          color: #444ce7;
          padding: 15px;
          font-size: 20px;
          font-weight: 700;
          border-radius: 50%;
        }
        .icon_add {
          margin-right: 10px;
          background: rgba(223, 223, 223, 0.349);
          border: 1px solid rgba(119, 119, 119, 0.247);
          color: #7c7c7c;
          padding: 15px;
          font-size: 20px;
          font-weight: 700;
          border-radius: 50%;
        }
        .content {
          width: calc(100% - 55px);
          .content_title {
            font-weight: 700;
            white-space: nowrap; /* 防止文本换行 */
            overflow: hidden; /* 隐藏超出容器的部分 */
            text-overflow: ellipsis; /* 用省略号表示被裁剪的文本 */
          }
          .content_text {
            white-space: nowrap; /* 防止文本换行 */
            overflow: hidden; /* 隐藏超出容器的部分 */
            text-overflow: ellipsis; /* 用省略号表示被裁剪的文本 */
            margin-top: 10px;
            font-size: 14px;
            height: 16px;
            color: #b4b4b4;
          }
        }
      }
      .item_but {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        margin-top: 15px;
        font-size: 14px;
        color: #b4b4b4;
        .text {
          white-space: nowrap; /* 防止文本换行 */
          overflow: hidden; /* 隐藏超出容器的部分 */
          text-overflow: ellipsis; /* 用省略号表示被裁剪的文本 */
        }
        .el-icon-more {
          &:hover {
            color: #909399;
            transform: scale(1.1);
          }
          padding: 5px 8px 0;
        }
      }
    }
  }
}

// .no_data {
//   position: absolute;
//   top: 100px;
//   left: 50%;
//   color: #999;
// }
</style>
